<template>
  <div>
    <el-card style="overflow:visible;">
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label="评分指标小项名称" prop="SCOREMINORTERMNAME">
              <el-input v-model.trim="form.SCOREMINORTERMNAME" placeholder="请输入评分指标小项名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="评分子项类型" prop="SCOREMINORTERMTYPE">
              <el-select v-model="form.SCOREMINORTERMTYPE" placeholder="请选择评分子项类型" clearable>
                <el-option 
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="评分子项属性" prop="SPECIALATTRIBUTE">
              <el-select v-model="form.SPECIALATTRIBUTE" placeholder="请选择特殊项属性" clearable>
                <el-option
                  v-for="item in specialOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg='8' :md='12' class="searchBtnMarginTop" :offset="4">
            <el-button type="primary" icon='el-icon-search' size='mini' @click="dataDictionaryQuery">查询</el-button>
            <el-button type='warning' size='mini' icon='el-icon-refresh' @click="resetForm('form')">重置</el-button>
            <el-button type="primary" size="mini" icon='el-icon-plus' @click="addDialog">新增评分子项</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col>
          <el-table :data="tableData" style="margin-top:20px;">
            <el-table-column label="序列号" prop="ID" align="center"></el-table-column>
            <el-table-column label="评分指标小项编号" prop="SCOREMINORTERMID" align="center"></el-table-column>
            <el-table-column label="评分指标小项名称" prop="SCOREMINORTERMNAME" align="center"></el-table-column>
            <el-table-column label="评分子项类型" prop="SCOREMINORTERMTYPE" align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column label="评分子项属性" prop="SPECIALATTRIBUTE" align="center" :formatter="dataFormat"></el-table-column>
            <!-- <el-table-column label="特殊项附属字段" prop="SUBSIDIARYFIELD" align="center"></el-table-column>
            <el-table-column label="特殊项附属字段分数映射" prop="SUBSIDIARYFIELDFS" align="center"></el-table-column>
            <el-table-column label="额外分值" prop="EXTRASCORE" align="center"></el-table-column> -->
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="修改" placement="top">
                  <el-button type="text" style="margin-left:0px" @click="editDialog(scope.row)">
                    <i class="el-icon-edit-outline"></i>
                  </el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <el-button type="text" style="margin-left:0px" @click="dictionaryEdit('D',scope.row)">
                    <i class="el-icon-delete"></i>
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-pagination style="text-align: right; margin-top:20px;" :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize" @size-change="handleInSizeChange" @current-change="handleInCurrentChange"
            :current-page="currpage" background layout="sizes, total, prev, pager, next, jumper" :total="tableTotal">
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <!-- 新增和编辑Dialog -->
    <el-dialog :title="dialogTitle" v-if="editIsShow" :visible.sync="editIsShow" :close-on-click-modal="false"
      @close="closeDialog('ruleForm')" @open="openDialog" width="800px">
      <el-card>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" size="small">
          <el-row :gutter="10">
            <el-col :span="12" v-if="operation == 'edit'">
              <el-form-item label="序列号" prop="ID">
                <el-input v-model.trim="ruleForm.ID" size="small" maxlength="50" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="operation == 'edit'">
              <el-form-item label="评分子项编号" prop="SCOREMINORTERMID">
                <el-input v-model.trim="ruleForm.SCOREMINORTERMID" size="small" maxlength="50" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="评分子项名称" prop="SCOREMINORTERMNAME">
                <el-input v-model.trim="ruleForm.SCOREMINORTERMNAME" size="small" maxlength="100" placeholder="请输入评分子项名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="评分子项类型" prop="SCOREMINORTERMTYPE">
                <el-select v-model="ruleForm.SCOREMINORTERMTYPE" placeholder="请选择评分子项类型" clearable>
                  <el-option 
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="评分子项属性" prop="SPECIALATTRIBUTE">
                <el-select v-model="ruleForm.SPECIALATTRIBUTE" placeholder="请选择特殊项属性" clearable>
                  <el-option
                    v-for="item in specialOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="特殊项附属字段" prop="SUBSIDIARYFIELD">
                <el-input v-model.trim="ruleForm.SUBSIDIARYFIELD" maxlength="200" placeholder="请输入特殊项附属字段"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="特殊项附属字段分数" prop="SUBSIDIARYFIELDFS">
                <el-input v-model.trim="ruleForm.SUBSIDIARYFIELDFS" maxlength="200" placeholder="请输入特殊项附属字段分数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="额外分值" prop="EXTRASCORE">
                <el-input v-model.trim="ruleForm.EXTRASCORE" maxlength="2" placeholder="请输入特额外分值"></el-input>
              </el-form-item>
            </el-col> -->
          </el-row>
        </el-form>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog('ruleForm')" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import request from "@/common/utils/requestQC";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import scoreDictionarySmallQuery from '@/message/QCManage/scoreTemplate/scoreDictionarySmall/scoreDictionarySmallQuery';
  import scoreDictionarySmallEdit from '@/message/QCManage/scoreTemplate/scoreDictionarySmall/scoreDictionarySmallEdit';
  export default {
    data() {
      return {
        form:{
          SCOREMINORTERMTYPE:'',
          SCOREMINORTERMNAME: '',
          SPECIALATTRIBUTE: '',
        },
        tableTotal: 1,
        currpage: 1,
        pageSize: getGlobalParams.get("PageSize"),
        ruleForm: {
          ID: '',
          SCOREMINORTERMID: '',
          SCOREMINORTERMNAME: '',
          SCOREMINORTERMTYPE: '',
          SPECIALATTRIBUTE: '',
          SUBSIDIARYFIELD: '',
          SUBSIDIARYFIELDFS: '',
          EXTRASCORE: '',
        },
        rules: {
          // ID: [{
          //   required: true,
          //   message: '请输入评分子项编号',
          //   trigger: 'blur'
          // }],
          // SCOREMINORTERMNAME: [{
          //   required: true,
          //   message: '请输入评分子项名称',
          //   trigger: 'blur'
          // }],
        },
        dialogTitle: '',
        editIsShow: false,
        tableData: [],
        operation: '', //编辑 or 新增
        typeOptions: [{
          value: '1',
          label: '标准项'
        }, 
        // {
        //   value: '2',
        //   label: '加分项'
        // }, 
        {
          value: '3',
          label: '致命项'
        }],
        specialOptions: [{
          value: '1',
          label: '打分'
        }, {
          value: '2',
          label: '选择'
        }],
        "type":{
          ' ':' ',
          '1':'标准项',
          // '2':'加分项',
          '3':'致命项',
        },
        "special":{
          ' ':' ',
          '1':'打分',
          '2':'选择',
        },
      }
    },
    mounted() {
      this.dataDictionaryQuery();
    },
    methods: {
      resetForm(formName) { //重置查询表单
        this.$refs["" + formName].resetFields();
      },
      async dataDictionaryQuery() {
        let resBody = new scoreDictionarySmallQuery();
        resBody.data.SCOREMINORTERMNAME = this.form.SCOREMINORTERMNAME;
        resBody.data.SCOREMINORTERMTYPE = this.form.SCOREMINORTERMTYPE;
        resBody.data.SPECIALATTRIBUTE = this.form.SPECIALATTRIBUTE;
        resBody.data.CurrPage = this.currpage;
        resBody.data.PageRowNum = this.pageSize;
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.tableData = response.BODY.REQBODY;
          this.tableTotal = response.BODY.rtnum;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      // 删除弹窗
      delClick(op,info){
        if(op=='D'){
          this.$confirm('是否确定删除记录，删除操作无法恢复!', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.dictionaryEdit(op,info);
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      },
      // 编辑
      async dictionaryEdit(op, info) {
        let resBody = new scoreDictionarySmallEdit();
        resBody.data.OPERATEMODE = op;
        if (op == 'D') {
          this.$confirm('此操作将删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then( async () => {
            resBody.data.ID = info.ID;
            resBody.data.SCOREMINORTERMID = info.SCOREMINORTERMID;
            let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.closeDialog('ruleForm');
          this.dataDictionaryQuery();
          var msg = '';
          if (op == 'D') {
            msg = '删除成功';
          } else if (op == 'A') {
            msg = '添加成功';
          } else {
            msg = '修改成功';
          }
          this.$message({
            type: "success",
            message: msg
          })
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        } else {
          resBody.data.ID = this.ruleForm.ID;
          resBody.data.SCOREMINORTERMID = this.ruleForm.SCOREMINORTERMID;
          resBody.data.SCOREMINORTERMNAME = this.ruleForm.SCOREMINORTERMNAME;
          resBody.data.SCOREMINORTERMTYPE = this.ruleForm.SCOREMINORTERMTYPE;
          resBody.data.SPECIALATTRIBUTE = this.ruleForm.SPECIALATTRIBUTE;
          resBody.data.SUBSIDIARYFIELD = this.ruleForm.SUBSIDIARYFIELD;
          resBody.data.SUBSIDIARYFIELDFS = this.ruleForm.SUBSIDIARYFIELDFS;
          resBody.data.EXTRASCORE = this.ruleForm.EXTRASCORE;
          let response = await request(resBody);
          if (response.SYS_HEAD.ReturnCode == "000000") {
            this.closeDialog('ruleForm');
            this.dataDictionaryQuery();
            var msg = '';
            if (op == 'D') {
              msg = '删除成功';
            } else if (op == 'A') {
              msg = '添加成功';
            } else {
              msg = '修改成功';
            }
            this.$message({
              type: "success",
              message: msg
            })
          } else {
            this.$message({
              type: "error",
              message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
            })
          }
        }
      },
      //前端分页
      handleInCurrentChange(val) {
        this.currpage = val;
        this.dataDictionaryQuery();
      },
      handleInSizeChange(val) {
        this.pageSize = val;
        this.dataDictionaryQuery();
      },
      addDialog() {
        this.editIsShow = true;
        this.dialogTitle = '新增评分子项';
        this.operation = 'add';
      },
      editDialog(row) {
        this.editIsShow = true;
        this.dialogTitle = '修改评分子项';
        this.operation = 'edit';
        this.ruleForm = JSON.parse(JSON.stringify(row));
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.operation == 'add') {
              this.dictionaryEdit('A');
            } else if (this.operation == 'edit') {
              this.dictionaryEdit('U');
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      openDialog() {
        if (this.$refs['ruleForm'] != undefined) {
          this.$refs['ruleForm'].clearValidate();
        }
      },
      closeDialog(formName) {
        this.editIsShow = false;
        this.ruleForm = {
          ID: '',
          SCOREMINORTERMID: '',
          SCOREMINORTERMNAME: '',
          SCOREMINORTERMTYPE: '',
          SPECIALATTRIBUTE: '',
          SUBSIDIARYFIELD: '',
          SUBSIDIARYFIELDFS: '',
          EXTRASCORE: '',
        };
      },
      dataFormat(row, column) {
        //枚举设备形式
        if (column.property == "SCOREMINORTERMTYPE")
          return this.type[row[column.property]];
        if (column.property == "SPECIALATTRIBUTE")
          return this.special[row[column.property]];
      },
    }
  }

</script>
